<template>
  <div class="leaveContainer">
    <div class='leaveCon'>
      <div>请假类型</div>
      <div @click="showMask=true">
        <span>{{form.leaveName}}</span>
        <i v-if="!showMask" class="icon-dropdowm"></i>
        <i v-else class="icon-arrow-up"></i>
      </div>
    </div>
    <div class="leaveDis">
        <ul v-if="form.leaveName==='年假'">
            <li v-for='(k,i) in yearLeaveList'>
                <label  @click.stop='changeColor("QN")' v-if="k.endDateAgo" :class="{'center': !checkQN && !checkJN}" >
                    <i class="icon-checked" :class='{"selectYear":checkQN}'></i>
                    {{k.QN}}年 年假<span style="color:red" v-if="k.endDateAgo">&nbsp;(有效期至{{k.endDateAgo}})&nbsp;</span>剩余&nbsp;<span class="selectYear">{{parseFloat(k.surplusAgo)}}天</span>
                </label>
                <label  @click.stop='changeColor("JN")' v-if="k.endDate" :class="{'center': !checkQN && !checkJN}">
                    <i :class='{"selectYear":checkJN ,"icon-checked":true}' ></i>
                    {{k.JN}}年 年假<span style="color:red" v-if="k.endDate">&nbsp;(有效期至{{k.endDate}})&nbsp;</span>剩余&nbsp;<span class="selectYear">{{parseFloat(k.surplus)}}天</span>
                </label>

            </li>
        </ul>
        <ul v-if="form.leaveName==='病假'">
            <li v-for='(k,i) in sickLeaveList'>
                <label   v-if="parseFloat(k.surplusQX)" >
                    <!-- <i class="icon-checked"></i> -->
                    {{k.leaveQX}}<span style="color:red" v-if="k.qxendDate">&nbsp;(有效期至{{k.qxendDate}})&nbsp;</span>剩余&nbsp;<span class="selectYear">{{parseFloat(k.surplusQX)}}天</span>
                </label>
                <label   v-if="parseFloat(k.surplusYX)" >
      
                    {{k.leaveYX}}剩余&nbsp;<span class="selectYear">{{parseFloat(k.surplusYX)}}天</span>
                </label>
            </li>
        </ul>
    </div>
    <div class="startTime">
      <div>开始时间</div>
      <div @click.stop="selectDate('start')">
        <span>{{form.startTime}}</span>
        <i v-if="!visibleDate" class="icon-dropdowm"></i>
        <i v-else class="icon-arrow-up"></i>

      </div>
    </div>
    <div class="endTime">
      <div>结束时间</div>
      <div @click.stop="selectDate('end')">
        <span>{{form.endTime}}</span>
        <i v-if="!visibleDate1" class="icon-dropdowm"></i>
        <i v-else class="icon-arrow-up"></i>
      </div>
    </div>
    <div class="leaveCon">
      <div>请假天数</div>
      <div class="leaveDay"><input class="leaveDays" v-model="form.leavedays" disabled type="text"></div>
    </div>
    <p>请假说明</p>
    <div>
      <textarea type="textarea"  v-model="form.leaveReason" placeholder="请输入请假说明" rows="3" style="" cols="20" class="leaveDesc">
      </textarea>
    </div>
    <div class="docuSelect">
      <uploader :src="'api'" v-model="fileList" :disabled.sync="disabled"  @previewPhoto="previewPhoto"></uploader>
    </div>
    <p>
      <span>审批流程</span>
      <span class="delDesc">点击名字删除审批人</span>
    </p>
    <div>
      <div class="selectPeo">
        <div  class="peoCon ">
          <span class="titleIcon disable">我</span>
          <span>发起人</span>
        </div>
        <!--<span class="titleIcon">曹阳</span>-->
        <i class="icon-arrow-right"></i>
        <template v-for="(item,index) in approSelList">
            <div  class="peoCon" @click="removeAppro(index)">     
                <span class="titleIcon">{{item.name && item.name.substr(-2)}}</span> 
                <span>{{item.name}}</span> 
            </div>
            <i class="icon-arrow-right"></i>
        </template>

        <div class="peoCon add" @click="handAdd('1')">
            <span class="titleIcon add">+</span>
            <span></span>
        </div>
        <i class="icon-arrow-right"></i>
        
        <div class="peoCon hr">
          <span class="titleIcon disable">{{hrName && hrName.substr(-2)}}</span>
          <p class="hr">人力资源部</p>
        </div>
        
      </div>
    </div>
    <p>
      <span>知会人</span>
      <span class="delDesc">点击名字删除抄送人</span>
    </p>
    <div class="copy">
        <appro-sel @add="handAdd('2')" :approSelList.sync="copySelList"></appro-sel>
    </div>
    <button class="btn" :class="{'submitColor':submitColor}" @click="createLeave">提 交</button>  
    <approve-show :showAppro.sync="approShow" :breadArr.sync="breadArr" :deptName="deptName" @searchAppro="selectApproPeo" @getSelPeo="getSelectPeo" :deptList.sync="deptList" :dataList.sync="approPeoList"></approve-show>
    <date-picker v-if="visibleDate" :visible.sync="visibleDate" @search="handleDateChange('start')" v-model="form.startTime"></date-picker>
    <date-picker v-if="visibleDate1" :visible.sync="visibleDate1" :isSupperShow.sync="isSupper" @search="handleDateChange('end')" v-model="form.endTime"></date-picker>
    <span>
      <v-mask :showMask.sync="showMask" :dataList="dataList" @returnChecked="getCheckedValue"></v-mask>
    </span>
    <mt-spinner v-if="spinnerShow" class="spinner" type="fading-circle" color="#26a2ff"></mt-spinner>
  </div>
</template>

<script>
import Vue from "vue";
import { Toast,Spinner} from "mint-ui";
import { MessageBox } from "mint-ui";

Vue.component(Spinner.name, Spinner);
import preview from '@/common/js/preview' 

import dataPicker from "@/components/leave/timePicker";
import uploader from "@/components/leave/uploader";
import Mask from "@/components/leave/mask";
import approveShow from "@/components/leave/approvePeoShow";
import approSel from "@/components/approve/approSel";
export default {
  name: "login",
  data() {
    return {
      name: "",
      pwd: "",
      visibleDate: false,
      visibleDate1: false,
      startDate: "2017.09.13 上午",
      endDate: "2017.09.20 下午",
      showMask: false,
      hrName: null,

      submitColor: false,
      isSubmitIng: false,

      isSupper: true,
      aTypeSelect: [],

      approShow: false,
      approSelList: [],
      approPeoList: [],
      companyName: "",
      deptName: "",
      breadArr: [],
      deptList: [],

      checkJN: false,
      checkQN: false,
      hasTwo: "two",
      BJdays: "",
      NJdays: "",

      typeForSel: null, //区分抄送人还是审批人

      leaveCause: "事假",
      checkedLeaveCause: null,
      yearLeaveList: [],
      sickLeaveList: [],
      surplusYX: null,
      surplusQX: null,

      copySelList: [],
      fileList: [],
      imgUrlList:[],

      spinnerShow:false,

      form: {
        leaveName: "请选择",
        startTime: "",
        endTime: "",
        leaveReason: "",
        leaveStSection: "",
        leaveEndSection: "",
        processName: "请假流程",
        auditorPerson: "",
        leavedays: ""
      },
    };
  },
  components: {
    "date-picker": dataPicker,
    "v-mask": Mask,
    uploader: uploader,
    approveShow,
    approSel
  },
  created: function() {
    this.initLeaveType();
    this.getShenpi();
  },
  computed: {
    dataList: function() {
//    if (this.hasTwo === "no") {
//      var indexYear;
//      this.aTypeSelect.forEach(function(val, index) {
//        if (val.code_name === "年假") {
//          indexYear = index;
//        }
//      });
//      if (this.aTypeSelect.length>0) {
//          this.aTypeSelect.splice(indexYear, 1);
//      }
//      
//    } else {
//      this.aTypeSelect;
//    }
      return this.aTypeSelect;
    },
    disabled:function(){
       if (!this.visibleDate && !this.visibleDate1) {
            return null
       } else  {
           return 'disabled'
       }
    }
  },
  watch: {
    fileList: function(newVal, oldVal) {}
  },
  methods: {

    previewPhoto:function(index){
        console.log(this.fileList,"fileList");
        this.imgUrlList = [];
        this.fileList.forEach((val,index,arr)=>{
            this.imgUrlList.push(this.fileList[index].src);
        })
        

        var obj = {
            urls : this.imgUrlList,
            current : this.imgUrlList[index]
        };
        preview.start(obj);
    },

    getZhihuirenData() {
      this.Axios
        .Post(this.URL.getCcList.url)
        .then(res => (this.getCcList = res.data.datas));
    },
    sendBumenAjax(data) {
      let { setid, deptid } = data;

      let params = {
        setid,
        deptid
      };

      this.Axios.Post(this.URL.getCcList.url, params).then(res => {
        let data = res.data.datas;
        let getCcList = this.getCcList;
        ({
          fristDept: getCcList.fristDept,
          deptList: getCcList.deptList,
          checkDept: getCcList.checkDept
        } = data);
      });
    },

    //初始化请假类型
    initLeaveType() {
      this.Axios.Post(this.URL.getLeaveInstruction.url).then(res => {
        res.data.datas && (this.aTypeSelect = res.data.datas);
      });

      this.Axios.Post(this.URL.getHrName.url, {}).then(res => {
        this.hrName = res.data.message;
      });

      this.Axios.Post(this.URL.getValication.url, {}).then(res => {
        var result = res.data.datas;

        this.surplusYX = result.surplusYX;
        this.surplusQX = result.surplusQX;

        // dataList.sickLeave.forEach(function(val,index){
        //     index===0 ? (val.isShow= true ) : (val.isShow= false);

        // });

        this.sickLeaveList = [result];

        // this.BJdays = result.surplusQX + result.surplusYX;
        this.NJdays =
          parseFloat(result.surplus) + parseFloat(result.surplusAgo);
        // dataList.yearLeave.forEach(function(val,index){
        //     index===0 ? (val.isShow= true ) : (val.isShow= false);

        // });

        if (parseFloat(result.surplusAgo) && parseFloat(result.surplus)) {
          this.hasTwo = "two";
          this.checkQN = true;
          this.checkJN = false;
        } else if (parseFloat(result.surplusAgo)) {
          this.hasTwo = "half";
          this.checkQN = true;
          this.checkJN = false;
        } else if (parseFloat(result.surplus)) {
          this.hasTwo = "half";
          this.checkJN = true;
          this.checkQN = false;
        } else {
          this.hasTwo = "no";
        }

        this.yearLeaveList = [result];
      });
    },
    //

    handleEmplid: function(value) {
      let approRes = [];
      value.forEach(function(val, index) {
        approRes.push(val.emplid);
      });
      return approRes.join();
    },

    compareInputTime: function(type) {
      var startDate = this.form.startTime.split(" ")[0].replace(/\./g, "-");
      var endDate = this.form.endTime.split(" ")[0].replace(/\./g, "-");

      if (startDate === endDate) {
        var startSec = this.form.startTime.split(" ")[1];
        var endSec = this.form.startTime.split(" ")[1];
        if (startSec === "下午") {
          if (endSec === "上午") {
            if (type === 'start') {
                this.form.endTime = this.form.startTime.split(' ')[0] + ' 下午';
            } else {
                this.form.startTime = this.form.endTime.split(' ')[0] + ' 上午';
            }
           
            return true;
          }
        }
      } else {
        if (!this.compareTime(startDate, endDate)) {
            if (type === 'start') {
                this.form.endTime = this.form.startTime.split(' ')[0] + ' 下午';
            } else {
                this.form.startTime = this.form.endTime.split(' ')[0] + ' 上午';
            }

          return true;
        }
      }
      return true;
    },

    compareTime: function(startDate, endDate) {
      if (!startDate || !endDate) {
        return;
      }
      return new Date(startDate) - new Date(endDate) < 0;
    },

    openYearLeave: function() {
      if (this.form.leaveName === "年假") {
        if (this.NJdays < parseFloat(this.form.leavedays)) {
          Toast({
            message: "请假天数超过年假剩余天数，请重新选择",
            position: "center",
            className: "toastStyle",
            duration: 2000
          });
          return false;
        }

        if (this.hasTwo === "two") {
          if (this.checkQN && !this.checkJN) {
            if (this.form.leavedays > this.yearLeaveList[0].surplusAgo) {
              MessageBox.confirm(
                `${this.yearLeaveList[0].QN}年年假不足,是否启用${this.yearLeaveList[0]
                  .JN}年年假`
              )
                .then(action => {
                  this.checkJN = true;
                  this.checkQN = true;
                })
                .catch(action => {
            
                });
              return false;
            }
          } else if (this.checkJN && !this.checkQN) {
            if (this.form.leavedays > this.yearLeaveList[0].surplus) {
              MessageBox.confirm(
                `${this.yearLeaveList[0].JN}年年假不足,是否启用${this.yearLeaveList[0]
                  .QN}年年假`
              )
                .then(action => {
                  this.checkJN = true;
                  this.checkQN = true;
                })
                .catch(action => {
                  
                });

              return false;
            }
          }
        }

        return true;
      }
      return true;
    },

    testTimeNULL: function() {
      if (this.form.leaveName === "请选择") {
        Toast({
          message: "请选择请假类型",
          position: "center",
          className: "toastStyle",
          duration: 1500
        });
        return false;
      }

      if (!this.form.startTime || !this.form.endTime) {
        Toast({
          message: "开始、结束时间不能为空",
          position: "center",
          className: "toastStyle",
          duration: 1500
        });
        return false;
      }
      return true;
    },

    testInputNULL: function() {
      // if (!this.form.leaveReason) {
      //   Toast({
      //     message: "请假理由不能为空",
      //     position: "center",
      //     className: "toastStyle",
      //     duration: 1500
      //   });
      //   return false;
      // }

      if (this.approSelList.length === 0) {
        Toast({
          message: "审批人至少需选一个",
          position: "center",
          className: "toastStyle",
          duration: 1500
        });
        return false;
      }
      return true;
    },

    isDayZero:function(){
      if (this.form.leavedays === 0) {
        Toast({
          message: "请假天数不能为0天",
          position: "center",
          className: "toastStyle",
          duration: 1500
        });
        return false;
      }
      return true;        
    },

    submitStartState: function() {
      this.isSubmitIng = true;
      this.submitColor = true;
      this.spinnerShow = true;
    },

    submitEndState: function() {
      this.isSubmitIng = false;
      this.submitColor = false;
      this.spinnerShow = false;
    },

    checkAll: function() {
      return (
        this.testTimeNULL() &&
        this.testInputNULL() &&
        this.openYearLeave() && 
        this.isDayZero()
      );
              // this.compareInputTime() &&
    },

    createLeave() {
 
      if (this.isSubmitIng) {
          return;
      }
      this.submitStartState();

      if (!this.checkAll()){
          this.submitEndState();
          return;
      }

      var years = [];
      if (this.form.leaveName === "年假") {
        if (this.checkQN) {
          years.push(this.yearLeaveList[0].QN);
        }
        if (this.checkJN) {
          years.push(this.yearLeaveList[0].JN);
        }
        // var arrYearStr = years.join(',');
        // params.years = arrYearStr;
      }

      let params = {
        // name:'',
        fromEmplid: "", //提交人id
        fromIdea: "",
        toIdea: "",
        actId: "",
        actName: "",
        toEmplid: this.handleEmplid(this.copySelList),
        leaveDay: this.form.leavedays,
        leaveName: this.form.leaveName, //请假类型
        startTime: this.form.startTime.split(" ")[0].replace(/\./g, "-"), //开始时间
        endTime: this.form.endTime.split(" ")[0].replace(/\./g, "-"), //结束时间
        leaveReason: this.form.leaveReason, //请假原因
        leaveStSection: this.getSecType(this.form.startTime), //1请假结束时间上午 2请假结束时间下午
        leaveEndSection: this.getSecType(this.form.endTime),
        processName: "请假流程",
        auditorId: this.handleEmplid(this.approSelList),
        years: years.join(','),
        atts: "",
        surplusQX: this.surplusQX
        // auditorPerson: this.form.auditorPerson //审核人

        //   auditStatus:form., //申请状态
        // effLeaveDay:form., //有效请假天数
        //  createTime:form., 	//创建时间
        // leaveEnclosur:form., //附件
      };

      if (this.fileList.length > 0) {
        this.Axios
          .axiosPostFormData(
            this.URL.uploadFile.url,
            { fileList: this.fileList },
            "form"
          )
          .then(res => {
            if (res.data.status == 1) {
              var result = res.data ? res.data.datas : {};
              params.atts = result.file_id ? result.file_id : "";
              this.postLeaveForm(params);
            } else {
              
              Toast({
                title: "提示",
                message: res.data.message || "图片上传失败",
                className: "toastStyle",
                duration: 2000
              });
              this.submitEndState();
            }
          });
      } else {
        this.postLeaveForm(params);
      }
    },

    postLeaveForm: function(params) {
      this.Axios
        .Post(this.URL.vacationInitiation.url, params)
        .then(res => {
          if (res.data.status == 1) {
            Toast({
              title: "提示",
              message: '提交成功',
              className: "toastStyle",
              duration: 2000
            });
            
            setTimeout(()=>{
              this.submitEndState();
              location.href = "/module/approve.html";
            }, 800);
          } else {
            Toast({
              title: "提示",
              message: res.data.message || '提交失败',
              className: "toastStyle",
              duration: 2000
            });
            this.submitEndState();
          }
        });
    },

    getSecType: function(val) {
      return val.split(" ")[1] == "上午" ? "1" : "2";
    },
    getCheckedValue: function(val) {
      this.form.leaveName = val;
    },
    selectDate: function(type) {
      type === "end"
        ? ((this.visibleDate1 = !this.visibleDate1), (this.visibleDate = false))
        : ((this.visibleDate = !this.visibleDate), (this.visibleDate1 = false));
    },

    //
    handAdd: function(type) {
      type === "1" ? (this.typeForSel = 1) : (this.typeForSel = 2);
      this.selectApproPeo();
    },
    initDefault: function() {
      // this.approShow = true;
      var params = {
        name: name || "",
        sourceType: "A"
      };
      this.Axios.Post(this.URL.getCcList.url, params).then(res => {
        this.approShow = true;
        // this.deptName = res.data.datas.checkDept.descrshort;
        // this.companyName = res.data.datas.fristDept.descrshort;
        this.breadArr = [];
        this.breadArr.push(res.data.datas.fristDept);
        this.breadArr.push(res.data.datas.checkDept);
        this.deptList = res.data.datas.deptList;
        this.approPeoList = res.data.datas.empList;
      });
    },
    selectApproPeo: function(name, type) {
      if (!type) {
        this.initDefault(name);
      } else if (type === "deptSearch") {
        let { setid, deptid } = name;
        var params = {
          setid,
          deptid
        };
        this.Axios.Post(this.URL.getCcListByDept.url, params).then(res => {
          this.approShow = true;

          if (type === "deptSearch") {
            if (this.breadArr.length >= 2) {
              this.breadArr.splice(1, 1, name);
            } else {
              this.breadArr.push(res.data.datas.checkDept);
            }
          }
          this.deptList = res.data.datas.deptList;
          this.approPeoList = res.data.datas.empList;
        });
      } else if (type === "searchName") {
        if (!name.name) {
          this.initDefault("");
          return;
        }
        let params = {
          search: name.name,
          setid: name.setid
        };

        this.Axios.Post(this.URL.getCcListBySearch.url, params).then(res => {
          // this.breadArr=[];
          // this.breadArr.push(res.data.datas.fristDept);
          this.approPeoList = res.data.datas.empList;
        });
      }
    },
    getSelectPeo: function(peo) {
      // this.approSelList.forEach(function(val){
      //     if (val.emplid === peo.emplid){
      //         Toast({
      //           message: '审批人已重复',
      //           position: 'center',
      //           className:'toastStyle',
      //           duration: 2000
      //         });
      //     }
      //     return;
      // })
      this.typeForSel === 1 ? this.pushIntoAppro(peo) : this.pusnIntoCopy(peo);
    },
    pushIntoAppro: function(peo) {
      for (var i = 0, len = this.approSelList.length; i < len; i++) {
        if (this.approSelList[i].emplid === peo.emplid) {
          Toast({
            message: "审批人已重复",
            position: "center",
            className: "toastStyle",
            duration: 2000
          });
          return;
        }
      }

      this.approSelList.push(peo);
    },
    pusnIntoCopy: function(peo) {
      for (var i = 0, len = this.copySelList.length; i < len; i++) {
        if (this.copySelList[i].emplid === peo.emplid) {
          Toast({
            message: "知会人已重复",
            position: "center",
            className: "toastStyle",
            duration: 2000
          });
          return;
        }
      }

      this.copySelList.push(peo);
    },

    changeColor: function(type) {
      if (this.hasTwo !== "two") {
        return;
      }
      if (type === "JN") {
        this.checkJN = this.checkJN ? false : true;

        if (this.hasTwo === "two") {
          this.checkQN = !this.checkJN;
        }
      } else {
        this.checkQN = this.checkQN ? false : true;
        if (this.hasTwo === "two") {
          this.checkJN = !this.checkQN;
        }
      }
    },

    removeAppro: function(index) {
      this.approSelList.length>0 && this.approSelList.splice(index, 1);
    },

    //

    handleDateChange(type) {
      if (!this.form.startTime || !this.form.endTime) {
      	
      	if (this.form.startTime) {
      		  this.form.endTime = this.form.startTime.split(' ')[0] + ' 下午';
      	} else if (this.form.endTime) {
      			this.form.startTime = this.form.endTime.split(' ')[0] + ' 上午';
      	}
       
      }

      if (!this.compareInputTime(type)) {
        return;
      }

      let params = {
        startTime: this.form.startTime.split(" ")[0].replace(/\./g, "-"), //开始时间
        endTime: this.form.endTime.split(" ")[0].replace(/\./g, "-"), //结束时间
        leaveStSection: this.getSecType(this.form.startTime), //1请假结束时间上午 2请假结束时间下午
        leaveEndSection: this.getSecType(this.form.endTime)
      };

      this.Axios.Post(this.URL.leaveBydays.url, params).then(res => {
        this.form.leavedays = res.data.datas.days;
        this.openYearLeave();
      });
    },

    getShenpi () {
      this.Axios
        .Post(this.URL.getHisList.url)
        .then((res) => {
            this.approSelList = res.data.datas;
        })

    },
  },
  mounted() {
    // Toast({
    //   message: '请求成功',
    //   position: 'center',
    //   className:'toastStyle',
    //   duration: 2000
    // });
  }
};
</script>

<style lang="less" scoped>
.leaveContainer {
  > div:not(.leaveDis):not(.copy):not(.leaveTime) {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
    > div:not(.vue-uploader):not(.selectPeo) {
      height: 0.8rem;
      display: inline-flex;
      align-items: center;
      line-height: 0.8rem;
      i {
        margin-left: 0.1rem;
        font-size: 0.32rem;
        color: #a2a2a2;
      }
      span:not(.titleIcon) {
        margin-left: 0.06rem;
      }
    }
    // >div.leaveDay{
    //     padding-left:0.56rem;
    // }

    div:first-child:not(.vue-uploader):not(.peoCon) {
      margin-left: 0.3rem;
    }

    div:first-child + div:not(.leaveDay) {
      text-align: right;
      margin-right: 0.3rem;
    }
    input {
      background-color: transparent;
      border: none;
      font-size: 0.32rem;
      outline: none;
      height: 0.8rem;
      padding: 0;
      line-height: 0.8rem;
      text-align: left;
      margin-left: 28%;
      width: 72%;
    }
    input::-webkit-input-placeholder {
      color: #888;
      font-size: 0.28rem; // padding-left: 0.6rem;
      font-weight: normal;
      text-align: left;
    }
    textarea {
      width: 100%;
      resize: none;
      margin-left: 0.3rem;
      display: inline-block;
      font-size: 0.32rem;
      line-height: 0.6rem;
      height: 0.6rem;
      border: none;
      height: 2.4rem;
      background-color: transparent;
      border: none; // margin-top:-0.1rem;
      padding: 0 0;
      vertical-align: top;
    }
    textarea::-webkit-input-placeholder {
      color: #888;
      line-height: 0.6rem;
      height: 0.6rem;
      font-weight: normal;
      font-size: 0.28rem;
      text-align: left;
    }
    textarea:focus {
      outline: none;
    }
    p:not(.hr) {
      width: 100%;
      min-height: 1rem;
      padding: 0.3rem;
      .titleIcon {
        font-size: 0.32rem;
        display: inline-block;
        width: 1rem;
        height: 1rem;
        line-height: 1rem;
        text-align: center;
        font-weight: 500;
        color: #fff;
        background-color: #007de4;
        border-radius: 50%;
        vertical-align: top;
      }
      span.disabled {
        font-size: 0.8rem;
        vertical-align: top;
        background: rgba(0, 0, 0, 0.2);
      }
      i {
        font-size: 0.48rem;
        color: #a2a2a2;
        margin-top: 0.26rem;
        margin-left: 0.1rem;
        display: inline-block;
      }
    }
    div.selectPeo {
      width: 100%;
      min-height: 1rem;
      padding-top: 0.3rem;
      padding-bottom: 0.3rem;
      line-height: 0.7rem;
      div:not(.hr) {
        display: inline-block;
        width: 1rem;
        margin: 0 0.04rem;
        text-align: center;
        vertical-align: top;
      }
      div.hr {
        display: inline-block;
        text-align: center;
        p {
          height: 0.32rem;
        }
      }
      .titleIcon {
        font-size: 0.32rem;
        display: inline-block;
        width: 1rem;
        height: 1rem;
        line-height: 1rem;
        text-align: center;
        font-weight: 500;
        color: #fff;
        background-color: #007de4;
        border-radius: 50%;
        vertical-align: top;
      }
      div.add {
        vertical-align: top;
      }
      span.add {
        font-size: 0.8rem;
        vertical-align: top;
      }
      span.disable {
        background: rgba(0, 0, 0, 0.3);
        font-size: #fff;
      }
      i {
        font-size: 0.32rem;
        color: #a2a2a2;
        margin-top: 0.32rem;
        vertical-align: top;
        display: inline-block;
      }
    }
  }
  .btn {
    width: 80%;
    height: 1rem;
    border: none;
    margin: 0.5rem 10%;
    outline: none;
    font-size: 0.32rem;
    font-weight: 600;
    color: #fff;
    border-radius: 0.5rem;
    background-color: #007de4;
  }
  button.submitColor {
    background-color: #2872af;
  }
  div.leaveDis {
    background-color: #fff;
    text-align: center;
    ul {
      li {
        line-height: 0.6rem;
        label {
          display: block;
          font-size: 0.24rem;
          padding-left: 1.2rem;
          text-align: left;
        }
        label.center {
          text-align: center;
          padding-left: 0rem;
        }
      }
    }
    .selectYear {
      color: #007de4;
    }
  }
  > p {
    padding-left: 0.3rem;
    margin-top: 0.3rem;
    line-height: 0.5rem;
    height: 0.5rem;
    .delDesc {
      font-size: 0.24rem;
      color: #aaa;
      margin-left: 0.1rem;
    }
  }
  div.leaveCon,
  div.startTime,
  div.docu {
    margin-top: 0.3rem;
    .leaveDays {
      font-size: 0.28rem;
    }
  }
  div.copy {
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
    background-color: #fff;
  }
  div.startTime {
    border-bottom: 0.02rem solid #eee;
  }
  .docuSelect {
    font-size: 0.32rem;
    position: relative;
    background-color: #fff;
    overflow: hidden;
    clear: both;
    line-height: 0.8rem;
    margin-top: 0.3rem;
  }
}
</style>
<style>
body .toastStyle {
  font-size: 0.4rem;
  color: #fff;
  background: rgba(0, 0, 0, 1);
  /*font-weight:600;*/
  font-family: "Microsoft YaHei", "微软雅黑";
}

/* .leaveContainer .slider_wrap.line{
    top:2rem;
    left: 0;
    position: absolute;
    width:100%;
} */

.spinner>div{
    position: fixed;
    top:0;
    bottom:0;
    left: 0;
    right:0;
    margin:auto;
    width: 1rem !important;
    height: 0.8rem !important;
    background: rgba(0,0,0,0.36);
}
</style>



